<%@ page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page import="userInteraction.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<jsp:useBean id="readUser" class="userInteraction.readUserInformation"></jsp:useBean>
<jsp:setProperty property="*" name="readUser"/>
<html>

<head>
<script type="text/javascript" src="validateAccount.js"></script>
<link rel="stylesheet" type="text/css" href="../General Info/css.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My Account</title>
</head>

<%if (session.getAttribute("loggedIn") == null) {
	response.sendRedirect("../User/index.jsp");
	}
	readUserInformation userInfo =new readUserInformation();
	ArrayList<String> returnedUser =new ArrayList<String>();
	returnedUser=userInfo.readUserByEmail(session.getAttribute("loggedIn").toString());
	
	String password= new String();
	for(int i=0; i<returnedUser.get(4).length(); i++){
		password=password+"*";
	}
	%> 

<body>
	<input type="hidden" name="firstName" id="hFirstName" value="<% out.println(returnedUser.get(0)); %>" />
	<input type="hidden" name="lastName" id="hLastName" value="<% out.println(returnedUser.get(1)); %>" />
	<input type="hidden" name="city" id="hCity" value="<% out.println(returnedUser.get(2)); %>" />
	<input type="hidden" name="phoneNumber" id="hPhoneNumber" value="<% out.println(returnedUser.get(3)); %>" />
	<input type="hidden" name="password" id="hPassword" value="<% out.println(returnedUser.get(4)); %>" />
	<input type="hidden" name="emailAddress" id="hEmailAddress" value="<% out.println(session.getAttribute("loggedIn")); %>" />
	
	<jsp:include page="../General Info/header.jsp"/>
<div class="body">
	<div class="account">
		<hr class="hr">
		<div class="name">
			Name&nbsp;<a id="displayText1" class="displayText" onclick="toggleName();">Change</a> 
			<hr class="hr">
			<div id="firstDiv1" class="firstDiv"><% out.println(returnedUser.get(0) + " " + returnedUser.get(1)); %></div>
			<div id="secondDiv1"  class="secondDiv" >
				<div id="nameUpdate" class="update">		
					<form name="updateName" method="POST" onsubmit="return validateName(this)" action="updateUserInformation.jsp" >
						<table>
							<tr>
								<td>First Name:</td>
	    						<td><input id="firstName" type=text name="firstName" value="<% out.println(returnedUser.get(0)); %>" onblur="validateFirstName();"></td>
	    						<td><span class="error" id="erFirstName"></span></td>
	    					</tr>
	    					<tr>
	    						<td>Last Name:</td>
	    						<td><input id="lastName" type=text name="lastName" value="<% out.println(returnedUser.get(1)); %>" onblur="validateLastName();"></td>
	    						<td><span class="error" id="erLastName"></span></td>
	    					</tr>
	    					<tr>
	    						<td></td>
	    						<td><input type="submit" value="Save Changes" class="inputButton"></td>
							</tr>
						</table>
					</form>
				</div>
				<div id="nameUpdateError" class="updateUserError"></div>
			</div>
		</div>
		
		<div class="email">
			Email Address&nbsp;<a id="displayText2" class="displayText" onclick="toggleEmail();">Change</a> 
			<hr class="hr">
			<div id="firstDiv2" class=firstDiv><% out.println(session.getAttribute("loggedIn")); %></div>
			<div id="secondDiv2"  class="secondDiv" >
				<div id="emailUpdate" class="update">
					<form name="updateEmail" method="POST" onsubmit="return validateEmail(this)">
						<table>
							<tr>
								<td>Existing Email:</td>
	    						<td><input id="oldEmailAddress" type=text name="oldEmailAddress" value="<% out.println(session.getAttribute("loggedIn")); %>" onblur="validateOldEmailAddress();"></td>
	    						<td><span class="error" id="erOldEmailAddress"></span></td>
	    					</tr>
	    					<tr>
	    						<td>New Email:</td>
	    						<td><input id="newEmailAddress" type=text name="newEmail" onblur="validateNewEmailAddress();"></td>
	    						<td><span class="error" id="erNewEmailAddress"></span></td>
	    					</tr>
	    					<tr>
	    						<td></td>
	    						<td><input type="submit" value="Save Changes" class="inputButton"></td>
							</tr>
						</table>
					</form>
				</div>
				<div id="emailUpdateError" class="updateUserError"></div>	
			</div>
		</div>
	
		<div class="pass">
			Password&nbsp;<a id="displayText3" class="displayText" onclick="togglePassword();">Change</a> 
			<hr class="hr">
			<div id="firstDiv3" class=firstDiv><% out.println(password); %></div>
			<div id="secondDiv3"  class="secondDiv" >
				<div id="passwordUpdate" class="update">
					<form name="passwordUpdate" method="POST" onsubmit="return validatePassword(this)">
						<table>
							<tr>
								<td>Old Password:</td>
	    						<td><input id="oldPassword" type=text name="oldPassword" onblur="validateOldPassword();" ></td>
	    						<td><span class="error" id="erOldPassword"></span></td>
	    					</tr>
	    					<tr>
	    						<td>New Password:</td>
	    						<td><input id="newPassword" type=text name="newPassword" onblur="validateNewPassword();"></td>
	    						<td><span class="error" id="erNewPassword"></span></td>
	    					</tr>
	    					<tr>
	    						<td>Retype New Password:</td>
	    						<td><input id="retypedNewPassword" type=text name="retypedNewPassword" onblur="validateRetypedNewPassword();" ></td>
	    						<td><span class="error" id="erRetypedNewPassword"></span></td>
	    					</tr>
	    					<tr>
	    						<td></td>
	    						<td><input type="submit" value="Save Changes" class="inputButton"></td>
							</tr>
						</table>
					</form>
				</div>
				<div id="passwordUpdateError" class="updateUserError"></div>		
			</div>
		</div>
		
		<div class="city">
			City&nbsp;<a id="displayText4" class="displayText" onclick="toggleCity();">Change</a> 
			<hr class="hr">
			<div id="firstDiv4" class=firstDiv><% out.println(returnedUser.get(2)); %></div>
			<div id="secondDiv4"  class="secondDiv" >
				<div id="cityUpdate" class="update">
					<form name="form4" method="POST" onsubmit="return validateCity(this)">
						<table>
							<tr>
								<td>Old City:</td>
	    						<td><input id="oldCity" type=text name="oldCity" value="<% out.println(returnedUser.get(2)); %>" onblur="completeOldCity();"></td>
	    						<td><span class="error" id="erOldCity"></span></td>
	    					</tr>
	    					<tr>
	    						<td>New City:</td>
	    						<td><input id="newCity" type=text name="newCity" onblur="validateNewCity();"></td>
	    						<td><span class="error" id="erNewCity"></span></td>
	    					</tr>
	    					<tr>
	    						<td></td>
	    						<td><input type="submit" value="Save Changes" class="inputButton"></td>
							</tr>
						</table>
					</form>
				</div>
				<div id="cityUpdateError" class="updateUserError"></div>
			</div>
		</div>
		
		<div class="phoneNumber">
			PhoneNumber&nbsp;<a id="displayText5" class="displayText" onclick="togglePhoneNumber();">Change</a> 
			<hr class="hr">
			<div id="firstDiv5" class=firstDiv><% out.println(returnedUser.get(3)); %></div>
			<div id="secondDiv5"  class="secondDiv" >
				<div id="phoneNumberUpdate" class="update">
					<form name="phoneNumberUpdate" method="POST" onsubmit="return validatePhoneNumber(this)">
						<table>
							<tr>
								<td>Old Phone Number:</td>
	    						<td><input id="oldPhoneNumber" type=text name="oldPhoneNumber" value="<% out.println(returnedUser.get(3)); %>" onblur="completeOldPhoneNumber();" ></td>
	    					</tr>
	    					<tr>
	    						<td>New Phone Number:</td>
	    						<td><input id="newPhoneNumber" type=text name="newPhoneNumber" onblur="validateNewPhoneNumber();" ></td>
	    						<td><span class="error" id="erNewPhoneNumber"></span></td>
	    					</tr>
	    					<tr>
	    						<td></td>
	    						<td><input type="submit" value="Save Changes" class="inputButton"></td>
							</tr>
						</table>
					</form>
				</div>
				<div id="phoneNumberUpdateError" class="updateUserError"></div>	
			</div>
		</div>
	<hr class="hr">	
	</div>
	<div class="push"></div>
	</div>
	<jsp:include page="../General Info/footer.jsp"/>
</body>
</html>